import { useState, useEffect } from 'react'
import SearchForm from '@/components/Form/SearchForm';
import TableList from '@/components/TableList/TableList';

import { Button, Space, Tag } from 'antd'
import type { ColumnsType } from 'antd/es/table';

import { searchList, buttonList } from "./option"
import confirmDialog from '@/utils/confirmDialog';

export default function Budget() {
    const [search, setSearch] = useState(searchList)
    const [initialValues, setInitialValues] = useState<any>()
    // 列表数据
    const [data, setData] = useState<any[]>();
    // 分页信息
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 0
    })

    const columns: ColumnsType<any> = [
        {
            title: '序号',
            render: (text, record, index) => `${index + 1}`,
        },
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },

        {
            title: '分类',
            dataIndex: 'type',
            key: 'type',
            render: (_: any, { type }: any) => (
                <Space size="middle">
                    <div>{type.label}</div>
                </Space>
            ),
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (_: any, { status }: any) => {
                let color;
                switch (status) {
                    case 0:
                        color = 'red';
                        break;
                    case 1:
                        color = 'green';
                        break;
                    case 2:
                        color = 'blue';
                        break;
                }
                return (
                    <Tag color={color} key={status}>
                        {status}
                    </Tag>
                )
            }
        },
        {
            title: '预算金额',
            dataIndex: 'budget',
            key: 'budget',
            render: (_: any, record: any) => (
                <Space size="middle">
                    <div>¥{record.price}</div>
                </Space>
            ),
        }, {
            title: '余额',
            dataIndex: 'balance',
            key: 'balance',
        }, {
            title: '姓名',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '操作',
            key: 'action',
            render: (_: any, record: any) => (
                <Space size="middle">
                    <a onClick={() => modifyBudget(record)}>编辑</a>
                    <a onClick={() => deleteBudget(record.id)} style={{ color: 'red' }}>删除</a>
                </Space>
            ),
        },
    ];

    //编辑
    const modifyBudget = (record: any) => {

    }

    //删除
    const deleteBudget = (id: string) => {
        confirmDialog('确定删除？', () => {
            //删除请求
        })
    }

    //监听翻页数据变化
    const pageChange = (current: number, pageSize: number) => {
        let page = pagination
        page.current = current
        page.pageSize = pageSize
        setPagination(page)
        getData()
    }
    //当前页面页码发生变化
    const currentChange = (current: number) => {
        let page = pagination
        page.current = current
        setPagination(page)
        getData()
    }

    // 获取列表数据
    const getData = (value?: any) => {
    }

    // 点击筛选
    const onQuery = (values: any) => {
        console.log(values);
        getData(values)
    };

    // 导出
    const exportData = () => {
        console.log("导出成功")
    }

    // 重置
    const onReset = () => {
        getData()
    }

    // 新增
    const onAdd = () => {
        setInitialValues({})
    }
    return (
        <div>
            {/* 搜素栏 */}
            <SearchForm searchList={search} buttonList={buttonList} onQuery={onQuery} onExport={exportData} onReset={onReset}>
                <Button type="primary" htmlType="button" onClick={onAdd} style={{ marginLeft: 20 }}>
                    新增
                </Button>
            </SearchForm>

            {/* 数据列表 */}
            <TableList columns={columns} initData={data} pagination={pagination} pageChange={pageChange} currentChange={currentChange}></TableList>
        </div>
    )
}
